<template>
  <view class="userList">
    <scroll-view
      scroll-y="true"
      class="scroll"
      @scrolltolower="handleGetMoreData"
    >
      <view class="list">
        <template v-if="isSkeleton">
          <view class="skeletonBox">
            <van-skeleton title row="5" />
          </view>
          <view class="skeletonBox">
            <van-skeleton title row="5" />
          </view>
        </template>
        <UserItem
          :userDetail="item"
          @showUserIntro="showUserIntro"
          v-for="(item, index) in userList"
          :key="index"
        />
      </view>

      <EmptyBox v-if="isEmpty" />
    </scroll-view>
  </view>
</template>

<script>
import UserItem from "../../../components/home/UserItem.vue";
import EmptyBox from "../../../components/public/EmptyBox.vue";
import { mapState } from "vuex";
export default {
  name: "UserList",
  components: {
    UserItem,
    EmptyBox,
  },

  data() {
    return {
      currentPage: 1,
      isSkeleton: true,
      isEmpty: false,
      isEnd: false,
      isMore: false,
    };
  },

  mounted() {
    this.getUserListData();
  },

  computed: {
    ...mapState(["userList", "userInfo"]),
  },
  methods: {
    // 展示用户联系信息
    showUserIntro(userDetail) {
      this.$emit("showUserIntro", userDetail);
    },

    // 获取用户列表
    async getUserListData(page = 0, limitCount = 2) {
      this.isSkeleton = true;
      await this.$store.dispatch("getUserList", { page, limitCount });
      this.isSkeleton = false;
      if (!this.userList.length) {
        this.isEmpty = true;
      }
    },

    // 上拉获取更多
    async handleGetMoreData() {
      if (this.isEnd) {
        return;
      }
      if (this.isMore) {
        return;
      }
      this.isMore = true;
      const page = ++this.currentPage,
        lastLength = this.userList.length;
      await this.$store.dispatch("getUserList", { page, limitCount: 1 });
      const currentLength = this.userList.length;
      if (lastLength === currentLength) {
        this.isEnd = true;
      }
      this.isMore = false;
      console.log("到达底部");
    },
  },
};
</script>

<style lang="scss" scoped>
.userList {
  box-sizing: border-box;
  padding: 20rpx 20rpx 40rpx 20rpx;
  width: 100%;

  .list {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .skeletonBox {
    padding: 10rpx 20rpx;
    padding-top: 30rpx;
    margin-bottom: 120rpx;
    width: 600rpx;
    height: 380rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }
  .scroll {
    width: 100%;
    height: calc(100vh - 280rpx);
  }
}
</style>
